<template>
  <el-container>
    <el-aside width="250px">
      <hostsGroupTable :name="name" @childClick="parentClick" />
    </el-aside>
    <el-container>
      <el-header style="font-size: 12px; width: 100%">
        <el-button-group>
          <el-button type="primary" size="mini" @click="dialog_host_open('新增')">
            <el-icon :size="12">
              <edit />
            </el-icon>
            主机新增
          </el-button>
          <el-button type="primary" size="mini" @click="dialog_host_open('编辑')">编辑</el-button>
          <el-button type="primary" size="mini" @click="commit_data_check">删除</el-button>
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button type="primary" size="mini" @click="dialog_soft_open('新增软件')">
            <el-icon :size="12">
              <takeaway-box />
            </el-icon>
            软件新增
          </el-button>
          <el-button type="primary" size="mini" @click="dialog_soft_open('编辑软件')">编辑</el-button>
          <el-button type="primary" size="mini" @click="delsoftdialogVisible = true">删除</el-button>
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button type="primary" size="mini" style="margin-left: 20px" @click="user_manage_click">用户管理</el-button>
        </el-button-group>

        <el-button-group style="padding-left: 5px">
          <el-button type="primary" size="mini" @click="open_conf_dialog">绑定配置</el-button>
        </el-button-group>
      </el-header>
      <el-main>
        <el-table ref="hots_table_ref" @current-change="check_host" highlight-current-row :cell-style="{ padding: 0 }"
          :data="hosts_table" style="font-size: 10px; width: 100%">
          <el-table-column type="expand" style="width: 100%">
            <template #default="props">
              <el-table :cell-style="{ padding: 0 }" @current-change="check_soft" highlight-current-row
                :data="props.row.software_data" style="width: 100%; font-size: 10px">
                <el-table-column show-overflow-tooltip prop="soft_nick" label="软件名称">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="soft_code_text" label="软件类型">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="soft_install_code_text" label="安装方式">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="comment" label="备注">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="服务器名称" prop="host_nick">
          </el-table-column>
          <el-table-column label="服务器IP" prop="host_ip"> </el-table-column>
          <el-table-column label="备注" prop="comment"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>

  <el-dialog :title="dialog_link_data.dialog_host_title" v-model="dialog_link_data.dialog_host" width="45%">
    <el-form ref="form_reset" :model="form_host" label-width="80px" size="mini">
      <el-form-item label="主机名称" prop="host_nick">
        <el-input v-model="form_host.host_nick"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主机IP" prop="host_ip">
            <el-input v-model="form_host.host_ip"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="连接端口" prop="host_connection_port">
            <el-input v-model="form_host.host_connection_port"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="组">
        <EnvSelect @childClick="env_Click" :env_select_value="env_id" />
      </el-form-item>
      <el-form-item label="连接类型">
        <SysCodeInput sys_code_type="host_connection_type" @childClick="connection_SysCodeClick"
          :sys_code_value="form_host.host_connection_code" />
      </el-form-item>
      <!--      <el-form-item label="默认用户">-->
      <!--        <SysCodeInput sys_code_type="host_connection_type" @childClick="SysCodeClick"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="主机类型">
            <SysCodeInput sys_code_type="host_base_type" @childClick="host_base_SysCodeClick"
              :sys_code_value="form_host.host_base_code" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主机功能">
            <SysCodeInput sys_code_type="host_function_type" @childClick="host_function_SysCodeClick"
              :sys_code_value="form_host.host_function_code" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="comment">
        <el-input v-model="form_host.comment"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog_link_data.dialog_host = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="comnit_data" size="mini">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog :title="dialog_soft_data.dialog_soft_title" v-model="dialog_soft_data.dialog_soft" width="60%">
    <el-form ref="form_soft_ref" :model="form_soft" label-width="80px" size="mini">
      <el-form-item label="软件名称" prop="soft_nick">
        <el-input v-model="form_soft.soft_nick"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="软件类型">
            <SysCodeInput sys_code_type="soft_type" @childClick="soft_type_SysCodeClick"
              :sys_code_value="form_soft.soft_code" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="安装方式">
            <SysCodeInput sys_code_type="soft_install_type" @childClick="soft_install_SysCodeClick"
              :sys_code_value="form_soft.soft_install_code" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="归类">
            <SysCodeInput sys_code_type="soft_subsumption_type" @childClick="soft_subsumption_SysCodeClick"
              :sys_code_value="form_soft.soft_subsumption_code" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关联包">
            <packageInput project_id="" @childClick="package_codeClick" :package_value="form_soft.package_id" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="软件目录" prop="soft_install_url">
            <el-input v-model="form_soft.soft_install_url"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部署启用" prop="host_connection_port">
            <el-switch v-model="form_soft.soft_install_on" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="form_soft.soft_install_on === true">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="部署需求" name="1">
            <el-tabs v-model="editableTabsValue" type="card">
              <el-tab-pane :key="item.conf_manage_name" v-for="item in install_conf" :label="item.conf_manage_nick"
                :name="item.conf_manage_name">
                <div style="margin-bottom: 10px">
                  <el-input placeholder="请输入内容" v-model="item.conf_manage_path">
                    <template #prepend>配置文件路径</template>
                  </el-input>
                </div>
                <el-input type="textarea" :rows="15" placeholder="请输入内容" v-model="item.conf_manage_content">
                </el-input>
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
        </el-collapse>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="心跳检查" prop="soft_check_url">
            <el-input v-model="form_soft.soft_check_url"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="心跳方式">
            <SysCodeInput sys_code_type="app_check_type" @childClick="soft_check_CodoClick"
              :sys_code_value="form_soft.soft_check_code" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-form-item label="应用路径" prop="soft_app_path">-->
      <!--        <el-input v-model="form_soft.soft_app_path"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="辅助命令" prop="comment">
        <el-input v-model="form_soft.soft_install_cmd"></el-input>
      </el-form-item>
      <el-form-item label="日志路径" prop="soft_restart_cmd">
        <el-input v-model="form_soft.soft_log_path"></el-input>
      </el-form-item>
      <el-form-item label="重启命令" prop="soft_restart_cmd">
        <el-input v-model="form_soft.soft_restart_cmd"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="启动命令" prop="soft_start_cmd">
            <el-input v-model="form_soft.soft_start_cmd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关闭命令" prop="soft_stop_cmd">
            <el-input v-model="form_soft.soft_stop_cmd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="comment">
        <el-input v-model="form_soft.comment"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog_soft_data.dialog_soft = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="comnit_soft_data" size="mini">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="提示" v-model="deldialogVisible" width="30%">
    <span>确认删除选中主机</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deldialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="delete_host_manage" size="mini">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog title="提示" v-model="delsoftdialogVisible" width="30%">
    <span>确认删除选中软件</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="delsoftdialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="delete_soft_manage" size="mini">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!--  <ConfirmationBox :open_del_soft_dialog=open_in text="删除软件" @childClick="delete_soft_manage" />-->

  <HostUserManage @childClick="close_user_open_conf_dialog_value" :in_value="user_open_conf_dialog_value"
    :resource_user_ids="resource_user_ids" />

  <ConfDialog @childClick="close_open_conf_dialog_value" :in_value="open_conf_dialog_value" :soft_id="check_soft_id"
    :props_title_name="check_soft_nick" />
</template>

<script lang="ts">
// import ConfirmationBox from '../communal/confirmation_box'
import hostsGroupTable from "@/components/communal/hosts_group_table.vue";
import EnvSelect from "@/components/communal/env_select.vue";
import * as Request from "@/general/request";
import ConfDialog from "@/components/communal/conf_dialog.vue";
// import {reactive, toRefs} from "vue";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import SysCodeInput from "@/components/communal/sys_code_input.vue";
import HostUserManage from "@/components/communal/host_user_manage.vue";
import packageInput from "@/components/communal/package_input.vue";

export default {
  name: "resource_management",
  props: {},
  setup(props) {
    let form_soft_ref = ref(null);
    let open_in = ref(false);
    let delsoftdialogVisible = ref(false);
    let deldialogVisible = ref(false);
    const form_refs = ref(null);
    const hots_table_ref = ref(null);
    let check_host_id = ref("");
    let check_soft_id = ref("");
    let check_soft_nick = ref("");
    let env_id = ref("");
    let hosts_table = ref([]);
    let host_type = ref([]);
    let editableTabsValue = ref("1");
    let dialog_link_data = reactive({
      dialog_host: false,
      dialog_host_title: "",
    });
    let dialog_soft_data = reactive({
      dialog_soft: false,
      dialog_soft_title: "",
    });
    let form_host = ref({
      software_data: [],
      host_nick: "",
      host_ip: "",
      host_connection_port: "",
      comment: "",
    });
    let form_soft = ref({
      soft_nick: "",
      soft_install_url: "",
      soft_install_on: false,
      soft_install_cmd: "",
      soft_start_cmd: "",
      soft_restart_cmd: "",
      soft_stop_cmd: "",
      soft_log_path: "",
      comment: "",
    });
    let install_conf = ref([]);
    let user_open_conf_dialog_value = ref(false);
    let open_conf_dialog_value = ref(false);
    let resource_user_ids = ref("");

    const open_conf_dialog = () => {
      if (!check_soft_id.value) {
        ElMessage.warning("请选择一个软件");
        return;
      }
      open_conf_dialog_value.value = true;
    };

    const close_open_conf_dialog_value = () => {
      open_conf_dialog_value.value = false;
    };

    const open_in_true = () => {
      open_in.value = true;
    };

    const package_codeClick = (e) => {
      form_soft.value.package_id = e;
    };

    const check_host = (row) => {
      if (row) {
        check_host_id.value = row.host_id;
        resource_user_ids.value = row.resource_user_ids;
      } else {
        check_host_id.value = "";
      }
    };

    const user_manage_click = () => {
      if (!resource_user_ids.value) {
        ElMessage.warning("请选择要关联的主机");
        return;
      }
      user_open_conf_dialog_value.value = true;
    };

    const close_user_open_conf_dialog_value = () => {
      user_open_conf_dialog_value.value = false;
    };

    const check_soft = (row) => {
      if (row) {
        check_soft_id.value = row.soft_id;
        check_soft_nick.value = row.soft_nick + "配置管理";
      } else {
        check_soft_id.value = "";
      }
    };

    const soft_check_CodoClick = (e) => {
      form_soft.value.soft_check_code = e;
    };

    const dialog_host_open = (e) => {
      // form_refs.value.resetFields()
      form_host.value.host_id = check_host_id.value;
      if (e === "编辑") {
        if (!check_host_id.value) {
          ElMessage.warning("请选择一台主机");
          return;
        }
        get_host_manage(check_host_id.value);
      }
      dialog_link_data.dialog_host = true;
      dialog_link_data.dialog_host_title = e;
    };
    const dialog_soft_open = (e) => {
      install_conf.value = [];
      if (!check_host_id.value && e === "新增软件") {
        ElMessage.warning("请选择要关联的主机");
        return;
      }
      if (!check_soft_id.value && e === "编辑软件") {
        ElMessage.warning("请选择要编辑的软件");
        return;
      }
      form_soft.value.host_id = check_host_id.value;
      dialog_soft_data.dialog_soft = true;
      dialog_soft_data.dialog_soft_title = e;

      if (form_soft_ref.value) {
        form_soft_ref.value.resetFields();
      }

      if (e === "编辑软件") {
        get_soft_manage(check_soft_id.value);
      }
    };

    const comnit_data = () => {
      if (dialog_link_data.dialog_host_title === "编辑") {
        put_host_manage();
      } else {
        post_host_manage();
      }
    };

    const comnit_soft_data = () => {
      if (dialog_soft_data.dialog_soft_title === "编辑软件") {
        put_soft_manage();
      } else {
        post_soft_manage();
      }
    };

    const commit_data_check = () => {
      if (!check_host_id.value) {
        ElMessage.warning("请选择一台主机");
        return;
      }
      deldialogVisible.value = true;
    };

    const parentClick = (e) => {
      env_host_soft(e);
      form_host.value.env_id = e;
      env_id.value = e;
    };

    const env_Click = (e) => {
      form_host.value.env_id = e;
    };

    const soft_type_SysCodeClick = (e) => {
      form_soft.value.soft_code = e;
    };

    const soft_install_SysCodeClick = (e) => {
      form_soft.value.soft_install_code = e;

      get_install_confs_require(e);
    };
    const soft_subsumption_SysCodeClick = (e) => {
      form_soft.value.soft_subsumption_code = e;
    };

    const connection_SysCodeClick = (e) => {
      form_host.value.host_connection_code = e;
    };
    const host_base_SysCodeClick = (e) => {
      form_host.value.host_base_code = e;
    };
    const host_function_SysCodeClick = (e) => {
      form_host.value.host_function_code = e;
    };

    const get_install_confs_require = async (e) => {
      const response = await Request.GET(
        "/background/home/deploy/get_install_confs_require",
        {
          sys_code: e,
          type: "soft",
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          let install_conf_swap = [];
          let i = 0,
            len = return_data.data.length;
          for (; i < len;) {
            install_conf_swap.push({
              conf_manage_path: "",
              conf_manage_ids: "",
              conf_manage_code: return_data.data[i]["sys_code"],
              conf_manage_content: "",
              conf_manage_nick: return_data.data[i]["sys_code_name"],
              conf_manage_name: return_data.data[i]["sys_code"],
            });
            i++;
          }

          install_conf.value = install_conf_swap;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const env_host_soft = async (env_id: string) => {
      const response = await Request.GET(
        "/background/home/resource_management/env_host_soft",
        {
          env_id: env_id,
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          hosts_table.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_host_manage = async (e) => {
      const response = await Request.GET(
        "/background/home/resource_management/host_manage",
        { host_id: e }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          form_host.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    const post_host_manage = async () => {
      const response = await Request.POST(
        "/background/home/resource_management/host_manage",
        form_host.value
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // hosts_table = return_data.data
          dialog_link_data.dialog_host = false;
          env_host_soft(form_host.value.env_id);
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    const put_host_manage = async () => {
      const response = await Request.PUT(
        "/background/home/resource_management/host_manage",
        form_host.value
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // form_host = return_data.data
          env_host_soft(form_host.value.env_id);
          ElMessage.success(return_data.msg);
          dialog_link_data.dialog_host = false;
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    const delete_host_manage = async () => {
      const response = await Request.DELETE(
        "/background/home/resource_management/host_manage",
        { host_ids: [check_host_id.value] }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          env_host_soft(form_host.value.env_id);
          // hosts_table = return_data.data
          deldialogVisible.value = false;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_host_soft = async (row) => {
      const response = await Request.GET(
        "/background/home/resource_management/get_host_soft",
        { host_id: row.host_id }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          row.software_data = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_soft_manage = async (soft_id) => {
      const response = await Request.GET(
        "/background/home/resource_management/soft_manage",
        { soft_id: soft_id }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          if (return_data.data.form_soft.soft_install_on === "True") {
            return_data.data.form_soft.soft_install_on = true;
          }
          form_soft.value = return_data.data.form_soft;
          install_conf.value = return_data.data.install_conf;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    const put_soft_manage = async () => {
      const response = await Request.PUT(
        "/background/home/resource_management/soft_manage",
        {
          form_soft: form_soft.value,
          install_conf: install_conf.value,
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          env_host_soft(env_id.value);
          dialog_soft_data.dialog_soft = false;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    const post_soft_manage = async () => {
      const response = await Request.POST(
        "/background/home/resource_management/soft_manage",
        {
          form_soft: form_soft.value,
          install_conf: install_conf.value,
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // hosts_table = return_data.data
          env_host_soft(env_id.value);
          dialog_soft_data.dialog_soft = false;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    const delete_soft_manage = async () => {
      const response = await Request.DELETE(
        "/background/home/resource_management/soft_manage",
        { soft_ids: [check_soft_id.value] }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          env_host_soft(env_id.value);
          // row.software_data = return_data.data
          // hosts_table = return_data.data
          delsoftdialogVisible.value = false;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    // const ref_hosts_table = toRefs(hosts_table)
    // const ref_hosts_table = hosts_table

    return {
      parentClick,
      connection_SysCodeClick,
      host_base_SysCodeClick,
      host_function_SysCodeClick,
      env_Click,
      host_type,
      soft_type_SysCodeClick,
      soft_install_SysCodeClick,
      soft_subsumption_SysCodeClick,
      props,
      open_in_true,
      dialog_host_open,
      check_host,
      form_refs,
      comnit_soft_data,
      form_soft_ref,
      hosts_table,
      dialog_link_data,
      form_host,
      env_id,
      get_host_soft,
      dialog_soft_data,
      form_soft,
      open_in,
      env_host_soft,
      get_host_manage,
      post_host_manage,
      put_host_manage,
      delete_host_manage,
      comnit_data,
      get_soft_manage,
      post_soft_manage,
      put_soft_manage,
      delete_soft_manage,
      deldialogVisible,
      commit_data_check,
      delsoftdialogVisible,
      dialog_soft_open,
      hots_table_ref,
      check_soft,
      install_conf,
      editableTabsValue,
      soft_check_CodoClick,
      close_user_open_conf_dialog_value,
      user_manage_click,
      check_host_id,
      user_open_conf_dialog_value,
      resource_user_ids,
      open_conf_dialog,
      close_open_conf_dialog_value,
      open_conf_dialog_value,
      check_soft_nick,
      check_soft_id,
      package_codeClick,
    };
  },
  components: {
    packageInput,
    ConfDialog,
    hostsGroupTable,
    SysCodeInput,
    EnvSelect,
    HostUserManage,
    // ConfirmationBox
  },
  methods: {},
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
